<!DOCTYPE html>
<html ng-app="plunker">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>Mega Acerto</title>

<link href="/megaacerto/style/css/bootstrapSpaceLab.css"
	rel="stylesheet">

<link rel="stylesheet" type="text/css"
	href="/megaacerto/style/css/styles.css" />

</head>

<body ng-controller="Index">
	<div ng-include src="'/megaacerto/page/menu.jsp'"></div>

	<div id="wrap">
		<div id="main" class="container clear-top">
			<section id="slide">
				<header></header>
				<section id="carrossel" class="carousel slide" data-interval="3000"
					data-ride="carousel">
					<div class="carousel-inner">
						<figure class="active item">
							<img alt="" src="/megaacerto/img/megaDaVirada.jpg">
						</figure>
						<figure class="item">
							<img alt="" src="/megaacerto/img/megaDaVirada.jpg">
						</figure>
						<figure class="item">
							<img alt="" src="/megaacerto/img/megaDaVirada.jpg">
						</figure>
						<figure class="item">
							<img alt="" src="/megaacerto/img/megaDaVirada.jpg">
						</figure>

					</div>
					<!-- Carousel nav -->

					<a class="carousel-control left" href="#carrossel"
						data-slide="prev"> <!--             <span class="glyphicon glyphicon-chevron-left"></span> -->

					</a> <a class="carousel-control right" href="#carrossel"
						data-slide="next"> <!--  <span class="glyphicon"></span> -->
					</a>
				</section>
			</section>
			<br />
			<div class="row">
				<div class="col-md-5">
					<div class="tile">
						<div class="tile-head tile-head-asfalt">Hoje</div>
						<div class="tile-body">
							<div class="row">
								<div class="col-md-4 tile-col-border">
									<p class="title lotoFacil">LOTOFACIL</p>
									<p>
										<strong>R$100.000,00</strong>
									<p>
										<a href="#">Saiba mais</a>
								</div>
								<div class="col-md-4 tile-col-border">
									<p class="title megaSena">MEGASENA</p>
									<p>
										<strong>R$100.000,00</strong>
									<p>
										<a href="#">Saiba mais</a>
								</div>
								<div class="col-md-4 tile-col">
									<p class="title quina">QUINA</p>
									<p>
										<strong>R$100.000,00</strong>
									<p>
										<a href="#">Saiba mais</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-7">
					<div class="tile">
						<div class="tile-head tile-head-belize">Amanhã</div>
						<div class="tile-body">
							<div class="row">
								<div class="col-md-3 tile-col-border">
									<p class="title lotoMania">LOTOMANIA</p>
									<p>
										<strong>R$100.000,00</strong>
									<p>
										<a href="#">Saiba mais</a>
								</div>
								<div class="col-md-3 tile-col-border">
									<p class="title megaSena">MEGASENA</p>
									<p>
										<strong>R$100.000,00</strong>
									<p>
										<a href="#">Saiba mais</a>
								</div>
								<div class="col-md-3 tile-col-border">
									<p class="title quina">QUINA</p>
									<p>
										<strong>R$100.000,00</strong>
									<p>
										<a href="#">Saiba mais</a>
								</div>
								<!-- 
								<div class="col-md-3 tile-col">
									<p class="title lotofacil">LOTOFACIL</p>
									<p>
										<strong>R$100.000,00</strong>
									<p>
										<a href="#">Saiba mais</a>
								</div>
								 -->
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- Main jumbotron for a primary marketing message or call to action -->
			<div class="bs-component">
				<legend></legend>
				<table class="table table-striped table-hover ">
					<thead>
						<tr>
							<th><a href="#" ng-click="carregarByTipoDeBolao('0')"><img
									alt=""  ng-src="img/btnmegasena.jpg"> </a></th>
							<th><a href="#" ng-click="carregarByTipoDeBolao('1')"><img
									alt="" ng-src="img/btnquina.jpg"> </a></th>
							<th><a href="#" ng-click="carregarByTipoDeBolao('2')"><img
									alt="" ng-src="img/bntlotomania.jpg"> </a></th>
							<th><a href="#" ng-click="carregarByTipoDeBolao('3')"><img
									alt="" ng-src="img/btnduplasena.jpg"> </a></th>
							<th><a href="#" ng-click="carregarByTipoDeBolao('4')"><img
									alt="" ng-src="img/bntlotofacil.jpg"> </a></th>
						</tr>
					</thead>
				</table>

				</p>

				<!-- Main jumbotron for a primary marketing message or call to action -->
				<div class="bs-component">
					<legend>
						<b>{{legenda}}</b>
						
					</legend><div dynamic="descTipoDeJogo"></div>
					<table class="table table-striped table-hover " ng-show="cotaUnicaBoloes">
						<thead>
							<tr>
								<th>Identificador</th>
								<th>Jogos</th>
								<th>Valor cota</th>
								<th>Total de cotas</th>
								<th>Cotas restante</th>
								<th>Quantidade</th>
								<th>Comprar</th>
							</tr>
						</thead>
						<tbody ng-repeat="bolao in cotaUnicaBoloes">
							<tr>
								<td>{{bolao.identificadorGrupo}}&nbsp;&nbsp;&nbsp;<span ng-show="bolao.idTipoSerieBolao != null"><img alt="Serie Bolão" ng-src="{{serieBolaoIMG}}"></span><span ng-show="bolao.premiado"> - <img alt="Seria Premiada" ng-src="/megaacerto/img/premiado.gif"></span> </td>
								<td><a data-toggle="modal" href="#myModal"
									ng-click="carregarJogos(bolao);"><img alt=""
										ng-src="/megaacerto/img/lupa-mini.png"> </a></td>
								<td>{{bolao.valorCota | currency:'R$'}}</td>
								<td>{{bolao.qtdCotas}}</td>
								<td>{{bolao.qtdCotasRestante}}</td>
								<td><select id="cotas" ng-model="cotas"
									class="form-control" ng-init="tamanho(bolao)">
										<option ng-repeat="valor in totalSelect[bolao.id]">{{valor}}</option>
								</select></td>
								<td><a href="/megaacerto/aut/carrinho.jsp"
									ng-click="adicionarCarrinhoBolao(bolao,cotas)"><img alt=""
										ng-src="/megaacerto/img/carrinho-mini.png"> </a></td>
							</tr>
						</tbody>
						<legend></legend>
						<tbody ng-repeat="bolao in variasCotasBoloes">
							<tr>
								<td>{{bolao.identificadorGrupo}}&nbsp;&nbsp;&nbsp;<span ng-show="bolao.idTipoSerieBolao != null"><img alt="Serie Bolão" ng-src="{{serieBolaoIMG}}"></span><span ng-show="bolao.premiado"><img alt="Seria Premiada" ng-src="/megaacerto/img/premiado.gif"></span></td>
								<td><a data-toggle="modal" href="#myModal"
									ng-click="carregarJogos(bolao);"><img alt=""
										ng-src="/megaacerto/img/lupa-mini.png"> </a></td>
								<td>{{bolao.valorCota | currency:'R$'}}</td>
								<td>{{bolao.qtdCotas}}</td>
								<td>{{bolao.qtdCotasRestante}}</td>
								<td><select id="cotas" ng-model="cotas"
									class="form-control" ng-init="tamanho(bolao)">
										<option ng-repeat="valor in totalSelect[bolao.id]">{{valor}}</option>
								</select></td>
								<td><a href="/megaacerto/aut/carrinho.jsp"
									ng-click="adicionarCarrinhoBolao(bolao,cotas)"><img alt=""
										ng-src="/megaacerto/img/carrinho-mini.png"> </a></td>
							</tr>
						</tbody>
					</table>
					
					<!-- 
					<table class="table table-striped table-hover " ng-show="variasCotasBoloes">
						<thead>
							<tr>
								<th>Identificador</th>
								<th></th>
								<th>Jogos</th>
								<th>Valor cota</th>
								<th>Total de cotas</th>
								<th>Cotas restante</th>
								<th>Quantidade</th>
								<th>Comprar</th>
							</tr>
						</thead>
						<tbody ng-repeat="bolao in variasCotasBoloes">
							<tr>
								<td>{{bolao.identificadorGrupo}}</td>
								<td><span ng-show="bolao.premiado"> - PREMIADO</span></td>
								<td><a data-toggle="modal" href="#myModal"
									ng-click="carregarJogos(bolao);"><img alt=""
										ng-src="/megaacerto/img/lupa-mini.png"> </a></td>
								<td>{{bolao.valorCota | currency:'R$'}}</td>
								<td>{{bolao.qtdCotas}}</td>
								<td>{{bolao.qtdCotasRestante}}</td>
								<td><select id="cotas" ng-model="cotas"
									class="form-control" ng-init="tamanho(bolao)">
										<option ng-repeat="valor in totalSelect[bolao.id]">{{valor}}</option>
								</select></td>
								<td><a href="/megaacerto/aut/carrinho.jsp"
									ng-click="adicionarCarrinhoBolao(bolao,cotas)"><img alt=""
										ng-src="/megaacerto/img/carrinho-mini.png"> </a></td>
							</tr>
						</tbody>
					</table>
					 -->
					<div id="source-button" class="btn btn-primary btn-xs"
						style="display: none;">&lt; &gt;</div>
				</div>
				<div class="modal" id="myModal" tabindex="-1" role="dialog"
					aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<span><b>MegaAcerto - {{legenda}}</b></span>
								<button type="button" class="close" data-dismiss="modal">
									<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
								</button>
								<!-- <h4 class="modal-title" id="myModalLabel"><!--CARREGAR DINAMICO Mega Sena</h4> -->
							</div>
							<div class="modal-body">
								<div class="alert alert-dismissable alert-warning">
									<button type="button" class="close" data-dismiss="alert">×</button>
										<p><b>Indentificador:</b>{{identificadorGrupo}}</p>
								</div>
								
								<div dynamic="descDesdobramento"></div>
								
									<pagination boundary-links="true" total-items="totalItems"
										data-current-page="currentPage" data-max-size="maxSize"
										ng-model="currentPage" class="pagination-sm"
										data-num-pages="numPages()" previous-text="&lsaquo;"
										next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>

									<div data-pagination="" data-num-pages="numPages()"
										data-current-page="currentPage" data-max-size="maxSize"
										data-boundary-links="true"></div>
									<table class="table table-striped table-hover ">
										<thead>
											<tr>
												<th></th>
												<th>ID</th>
												<th>Jogo</th>
											</tr>
										</thead>
										<tbody ng-repeat="jogo in jogos">
											<tr>
												<td></td>
												<td>{{jogo.id}}</td>
												<td>{{jogo.sequencia}}</td>
											</tr>
										</tbody>
									</table>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default"
									data-dismiss="modal">Fechar</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div ng-include src="'/megaacerto/page/footer.html'"></div>

	<script src="/megaacerto/javascript/recursos/jquery-1.11.1.js"></script>

	<!-- Latest compiled and minified JavaScript -->
	<script src="/megaacerto/javascript/recursos/bootstrap.min.js"></script>

	<script type="text/javascript"
		src="/megaacerto/javascript/recursos/angular_2.min.js"></script>

	<script src="/megaacerto/javascript/recursos/storageprovider.js"></script>

	<script type="text/javascript"
		src="/megaacerto/javascript/control/angular-route.js"></script>

	<script type="text/javascript"
		src="/megaacerto/javascript/recursos/ui-bootstrap-tpls-0.11.0.min.js"></script>

	<script type="text/javascript"
		src="/megaacerto/javascript/control/index.js"></script>


</body>

</html>